import React from 'react'
import { useAuth } from '../context/authContext'

// interface Base {
// 	id: number
// }

// interface Advance extends Base {
// 	name: string
// }

// const test = (p: Base) => {}

// // 鸭子类型（duck typing)：面向接口编程 而不是 面向对象编程
// const a: Advance = { id: 1, name: '1'}
// const b = { id: 1, name: '1'}
// // 只需要传入的参数符合Base接口就可以
// test(a)
// test(b)

export const LoginScreen = () => {
	const { login, user } = useAuth()

	const handleSubmit = (event: any) => {
		event.preventDefault()
		const username = event.currentTarget.elements[0].value
		const password = event.currentTarget.elements[1].value
		login({ username, password })
	}
	return (
		<form onSubmit={handleSubmit}>
			登陆成功，用户名{user?.name}

			<div>
				<label htmlFor="username">用户名</label>
				<input type="text" id={'username'} />
			</div>
			<div>
				<label htmlFor="password">密码</label>
				<input type="password" id={'password'} />
			</div>
			<button type={'submit'}>登录</button>
		</form>
	)
}
